import * as React from 'react'
import classNames from 'classnames'
import './style/index.less'
import * as utils from './utils'
import addEventListener from '../util/dom/addEventListener'
import findDomNode from '../util/dom/findDomNode'

import { SliderProps, SliderState } from './interface'
const defaultProps = {
  prefixCls: 'layui-slider',
  type: 'type', // 垂直
  disabled: false, // 滑块禁用
  step: 1, // 间隔值
  value: undefined, // 值
  defaultValue: 0, // 默认值
  tips: true, // 文字提示
  range: false, // 范围选择
  theme: '#009688', // 主题颜色
  min: 0, // 最小值
  max: 100, // 最大值
  showStep: false, // 间隔点
  height: 200 // type='vertical'生效
}
class Slider extends React.Component<SliderProps & Partial<typeof defaultProps>, SliderState> {
  static defaultProps = defaultProps
  constructor(props: SliderProps & Partial<typeof defaultProps>) {
    super(props)
    const { defaultValue, value } = props
    this.state = {
      value: value || defaultValue,
      isMove: false,
      position: 0,
      min: 0,
      max: 0,
      scale: '',
      len: 0
    }
  }
  sliderRef = React.createRef<any>()

  onMouseMoveListener: any
  // document: undefined | Document

  componentDidMount = () => {
    console.log(this.sliderRef)
    // 点击滑块事件 
    // this.document = this.sliderRef && this.sliderRef.current
    // 计算滑块条的起始位置
    let current = this.sliderRef.current
    let currentDom: any = findDomNode(current)
    let width = currentDom?.offsetWidth
    console.log(currentDom?.offsetLeft);
    const {
      disabled, defaultValue = 0, step,
      min = 0, max = 100, showStep, tips,
      tipsRender, range, type,
      className, prefixCls, value = undefined,
      theme, ...restProps
    } = this.props
    let scale = Math.floor(((value || defaultValue) - min) / (max - min) * 100)
    this.setState({
      scale: scale + '%',
      len: width,
      min: Math.floor(((value || defaultValue) - min) / (max - min) * width)
    })
  }

  onTouchStart = (e: React.TouchEvent) => {
    console.log('onTouchStart')
    // if (utils.isNotTouchEvent(e)) return
    // const { type } = this.props
    // const { position } = utils.getTouchPosition(type === 'vertical', e)
    // console.log(position)
  }

  onMouseDown = (e: React.MouseEvent) => {
    console.log('onMouseDown', e)
    if (e.button !== 0) return
    const { type } = this.props
    const position = utils.getMousePosition(type === 'vertical', e)
    console.log('position => ', position)
    this.onDown(e, position)
    // this.a
    this.setState({
      isMove: true,
      position
    })
  }

  onDown = (e: React.MouseEvent, position: number) => {
    let p = position
    const { type } = this.props

  }

  onMouseUp = (e: React.MouseEvent) => {
    console.log('onMouseUp', e)
    const { type, min = 0, max = 100 } = this.props
    const { position, min: stateMin, len } = this.state
    const curPosition = utils.getMousePosition(type === 'vertical', e)
    console.log('up position => ', curPosition)
    this.setState({
      isMove: false
    })
  }

  onMouseMove = (e: React.MouseEvent) => {
    console.log('onMouseMove', e)
    const { type, min = 0, max = 100 } = this.props
    const { position, min: stateMin, len, isMove } = this.state
    const curPosition = utils.getMousePosition(type === 'vertical', e)
    console.log('onMouseMove position => ', curPosition)
    if (!isMove) {
      return
    }
    if (stateMin - (position - curPosition) > 0) {
      let scale = Math.floor((stateMin / len) * 100) + '%'
      this.setState({
        min: stateMin - (position - curPosition),
        scale,
        position: curPosition
      })
    } else {
      this.setState({
        min: 0,
        scale: '0%',
        position: (position - stateMin)
      })
    }

  }

  addDocumentMouseEvents = () => {
    // this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this)
  }

  render() {
    const {
      disabled, defaultValue = 0, step,
      min = 0, max = 100, showStep, tips,
      tipsRender, range, type,
      className, prefixCls, value = undefined,
      theme, ...restProps
    } = this.props
    const classes = classNames(prefixCls, className, {
      [`${prefixCls}-vertical`]: type === 'vertical'
    })

    let barStyle: any = {
      background: theme
    }
    // let
    const { scale } = this.state
    let wrapStyle: any = {}
    if (type === 'vertical') {
      barStyle.height = scale
      barStyle.bottom = 0
      wrapStyle.bottom = scale
    } else {
      barStyle.width = scale
      barStyle.left = 0
      wrapStyle.left = scale
    }

    // console.log(this.sliderRef);

    return (
      <div
        ref={this.sliderRef}
        className={classes}
        {...restProps}
      >
        { tips ? <div className={`${prefixCls}-tips`}></div> : ''}
        <div className={`${prefixCls}-bar`} style={barStyle}></div>
        <div
          className={`${prefixCls}-wrap`}
          style={wrapStyle}
          onTouchStart={this.onTouchStart}
          onMouseDown={this.onMouseDown}
          onMouseUp={this.onMouseUp}
          onMouseMove={this.onMouseMove}
        >
          <div className={`${prefixCls}-wrap-btn`} style={{ border: `2px solid ${theme}` }}></div>
        </div>
      </div>
    )
  }
}

export default Slider